<template>
	<view class="comics">

		<view class="comic-item" v-if="dataList?.length" v-for="item in dataList" :key="item.id" @click="itemClick(item)">
			<image class="chapter-image" :src="item.coverpic" />
			<view class="title text-ellipsis">{{ item.title }}</view>
			<view class="author text-ellipsis">{{ item.author }}</view>
		</view>
		<view v-else class="empty-data-box">
			<image class="empty-img" :src="`${imgBaseUrl}history-empty-data.webp`" />
			<view class="empty-text">前往书城选择喜欢的漫画，加入追更吧</view>
		</view>

	</view>
</template>

<script setup lang="ts">
import { getHistoryList } from '@/api'
import { ref } from 'vue'


const dataList = ref<API.BookItem[]>()

const itemClick = (item: API.BookItem) => {
	// uni.navigateTo({ url: `/pages/book-detail/index?&id=${item.id}` })
getHistoryChaps
}

const getList = async () => {
	const { data } = await getHistoryList({ page: 1, page_size: 1000, })
	dataList.value = data.data
}

getList()
uni.setNavigationBarTitle({ title: '历史记录' })
</script>

<style lang="less" scoped>
.comics {
	height: 100vh;
	width: 100vw;
	overflow: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	background-color: #ffffff;
}

.comic-item {
	width: 218rpx;
	height: 364rpx;
	border-radius: 6rpx;
	margin-left: 24rpx;
	margin-top: 37rpx;
}

.comic-item image {
	width: 218rpx;
	height: 292rpx;
	border-radius: 6rpx;
}

.comic-item .title {
	width: 100%;
	font-size: 28rpx;
	color: #000000;
}

.comic-item .author {
	width: 100%;
	font-size: 24rpx;
	color: #555555;
	text-align: center;
}

.empty-data-box {
	width: 100%;
	text-align: center;
	font-size: 30rpx;
	margin-top: 290rpx;

	.empty-img {
		width: 468rpx;
		height: 360rpx;
	}

	.empty-text {
		font-size: 28rpx;
		color: #595E6C;
	}
}
</style>